<template>
  <div id="app">
    <el-container style="height: 100%">
      <el-aside :width="isCollapse?'65px':'200px'" style="background-color: #1b2431">
        <div style="width: 100%;text-align: center">
          <el-button @click="changeCollapse" id="collapse" :class="{'active':isCollapse}" icon="iconfont icon-caidanlan" size="small" circle ></el-button>
        </div>
        <el-menu default-active="1-1"  :collapse="isCollapse" background-color="#1b2431"  active-text-color="#0fffff" text-color="#fff" style="border-right: none">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">基础数据</span>
            </template>
            <el-menu-item index="1-1">遥感影像</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container >
        <el-header style="background-color: #1b2431;line-height: 60px;font-size: 22px;font-family: 'Regular';color: #fff" >
            <img src="https://ram-public.oss-cn-zhangjiakou.aliyuncs.com/omapLogo/gykj.png" style="vertical-align: middle" />
            农险演示系统
        </el-header>
        <el-main style="padding: 0;position: relative">
          <div id="map" style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;z-index: 1"></div>
          <div style="position: absolute;left: 20px;top: 20px;z-index: 100">
            <el-select
                v-model="value2"
                multiple
                collapse-tags size="small"
                placeholder="请选择">
              <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
            <el-button  icon="el-icon-close" size="small" style="margin-left: 10px"></el-button>

          </div>
          <marker-box :scene="scene" :map="map"></marker-box>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import mapboxgl from './assets/lib/mapbox_gl_4490';
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { DrillDownLayer } from '@antv/l7-district';
// const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
import markerBox from './components/markerBox'


export default {
  name: 'App',
  components: {
    markerBox
  },
  data(){
    return{
      isCollapse:false,
      map:null,
      value2:null,
      options:[]
    }
  },
  mounted(){
    // this.map = new mapboxgl.Map({
    //   container: 'map',
    //   style: 'https://api.grandtechmap.com/mapeditor/styles/QDHhGztwi'
    // });
    this.scene = new Scene({
      id: 'map',
      map: new Mapbox({
        style: 'http://120.133.60.156:9035/api/v1/styles/gykj/rJxP2DamuX',
        pitch: 0,
        center: [ 127.5671666579043, 7.445038892195569 ],
        zoom: 2.632456779444394
      })
    });

    const map = this.scene.map;
    this.map = map;

    this.scene.on('loaded', () => {
      new DrillDownLayer(this.scene, {
        data: [],
        viewStart: 'Country',
        viewEnd: 'City',

        provinceStroke:"#00FF00",
        provinceStrokeWidth:3,
        cityStroke :"#00FF00",
        cityStrokeWidth :3,
        countyStroke  :"#00FF00",
        countyStrokeWidth :3,
        popup: {
          enable: true,
          Html: props => {
            return `<span>${props.NAME_CHN}</span>`;
          }
        }
      });
    });



    for (let i = 2020; i <= 2021; i++) {
      for (let j = 1; j <= 12; j++) {
        this.options.push(i+"年"+j+"月")
      }
    }

  },
  methods:{
    changeCollapse(){
      this.isCollapse=!this.isCollapse;
    }
  }
}
</script>

<style>
#app,body,html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#collapse {
  margin: 12px;
  transition: all ease-out 0.3s;
  -webkit-transition: all ease-out 0.3s;
  -moz-transition: all ease-out 0.3s;
  transform: rotate(0);
  border: none;
  background-color: #1b2431;
  color: #fff;
}

#collapse.active {
  transform: rotate(90deg);
}

#marker {
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
</style>
